<template>
	<view>
		<!-- 客服 cuservice -->
		<liu-drag-button @clickBtn="callPhone"
		:bottomPx="75"
		:rightPx="10"
		>
			<view class="cuservice" :class="'color' + ThemeType">
				<i class="iconfont icon-kefunvfill"></i>
				<text>
					客服
				</text>
			</view>
		</liu-drag-button>
		
	</view>
</template>

<script>
	export default {
		props: {
			servicetel: {
				type: [Number, String],
				default: '',
			},
			// 1：南站直达 2：机场直达 3：福祉车 4：校园车
			showtype: {  
				type: Number,
				default: 1,
			},
			ThemeType: {
				type: Number,
				default: 1, // 1.蓝色  2.红色
			},
		},
		data() {
			return {

			}
		},
		methods: {

			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.servicetel || '18033879912', // 电话号码
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.cuservice {
		// position: fixed;
		bottom: 150rpx;
		right: 6rpx;
		z-index: 6;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		width: 124rpx;
		height: 124rpx;
		border-radius: 100%;
		background: #FFFFFF;
		

		i {
			font-size: 55rpx;
		}

		&.color1 {
			i {
				color: #3270E0;
			}
		}
		&.color2 {
			i {
				color: #FFAA3C;
			}
		}

		&.color3 {
			i {
				color: #FF5728;
			}
		}

		&.color4 {
			i {
				color: #003232;
			}
		}

		text {

			font-size: 24rpx;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			text-align: center;
			margin-top: 6rpx;
		}

	}
</style>